<template>
  <div>
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in items" :key="item.id">
        <a :href="item.href" rel="external nofollow" >
          <img :src="item.url" class="img"/>
          <span class="desc"></span>
        </a>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
  import {Swipe, SwipeItem} from 'mint-ui'
  import 'mint-ui/lib/style.css'

  export default {
    components: {
      'mt-swipe': Swipe,
      'mt-swipe-item': SwipeItem
    },
    name:'test',
    data () {
      return {
        items: [{
          title: '你的名字',
          href: 'http://google.com',
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614327542&t=e0a4a795692145c97539a41459167af7'
        }, {
          title: '我的名字',
          href: 'http://baidu.com',
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614327542&t=e0a4a795692145c97539a41459167af7'
        }]
      }
    }
  }
</script>
<style scoped>
  img {
    width: 100%;
  }
  .mint-swipe {
    height: 218px;
  }
  /*.desc {*/
  /*  font-weight: 600;*/
  /*  opacity: .9;*/
  /*  padding: 5px;*/
  /*  height: 20px;*/
  /*  line-height: 20px;*/
  /*  width: 100%;*/
  /*  color: blue;*/
  /*  background-color: gray;*/
  /*  position: absolute;*/
  /*  bottom: 0;*/
  /*}*/
</style>
